<template>
	<view class="content-container">
		<!-- 购物车为空 -->
		<view class="empty-box" v-if="cart.length === 0">
			<uni-icons color="#efefef" type="cart" size="80"></uni-icons>
			<view class="text-box">购物车空空如也</view>
			<view class="gohome-btn" @click="goHome">去逛逛</view>
		</view>
		<!-- 购物车不为空 -->
		<view v-else>
			<!-- 头部文字+操作 -->
			<view class="header-box">
				<text>自提点：万达广场</text>
				<view class="edit-btn" @click="() => showSettle = !showSettle">{{ showSettle ? '编辑商品' : '完成' }}</view>
			</view>
			<!-- 中间模态框 -->
			<view class="modal-box" v-show="showModal">
				向左滑动，可删除商品。有效商品删除后可显示购物车空
				<text class="close-btn" @click="closeModal"> X</text>
			</view>
			<!-- 商品列表 -->
			<uni-swipe-action>
				<view class="goods-list" v-for="(goods,index) in effective" :key="index">
					<uni-swipe-action-item :right-options="options" @click='handleDelete(goods)'>
						<my-goods :goods="goods" @radio-change = "radioChangeHandler" @num-change = "numberChangeHandler"></my-goods>
					</uni-swipe-action-item>
				</view>
			</uni-swipe-action>
		</view>
		<!-- 失效商品 -->
		<view class="lose-efficacy-box">
			<view class="lose-efficacy-firstline">
				<view>失效商品</view>
				<view class="clear-box" @click="clearAllLoseGoods">清空失效商品</view>
			</view>
			<!-- 失效商品列表 -->
			<uni-swipe-action>
				<view class="goods-list" v-for="(goods,index) in loseEffective" :key="index">
					<uni-swipe-action-item :right-options="options" @click='handleDelete(goods)'>
						<lose-efficacy-goods :goods="goods"></lose-efficacy-goods>
					</uni-swipe-action-item>
				</view>
			</uni-swipe-action>
		</view>
		<!-- 推荐的商品 -->
		<view class="recommend-box">
			<view class="recommend-text">为您推荐</view>
			<view class="recommend-goods-list">
				<my-showgoods></my-showgoods>
			</view>
		</view>
		<!-- 自定义结算组件 -->
		<my-settle :showSettle="showSettle"></my-settle>
	</view>
</template>

<script>
	import {mapState,mapActions,mapGetters} from 'vuex'
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default{
		//购物车数字徽标
		mixins:[badgeMix],
		data(){
			return{
				msg:"axlab购物车",
				showModal:true,
				/* 向左滑动删除 */
				options:[{
					text:'删除',
					style:{
						backgroundColor:'#c00000'
					}
				}],
				showSettle:true
			}
		},
		methods:{
			...mapActions('m_cart',['updateGoodsState','updateGoodsCount','removeGoodsById','removeAllLoseGoods']),
			/* 关闭进入页面时的模态框 */
			closeModal(){
				this.showModal = false;
			},
			
			/* 勾选or取消勾选 */
			radioChangeHandler(value){
				// console.log(value);
				this.updateGoodsState(value)
			},
			/* 钩盖商品数量 */
			numberChangeHandler(value){
				// console.log(value);
				this.updateGoodsCount(value)
			},
			/* 向左滑动删除商品 */
			handleDelete(goods){
				this.removeGoodsById(goods.goods_id)
			},
			/* 购物车为空点击跳转到home */
			goHome(){
				uni.switchTab({
					url:'/pages/home/home'
				})
			},
			/* 清空所有失效商品 */
			clearAllLoseGoods(){
				this.removeAllLoseGoods()
			}
		},
		computed:{
			...mapState('m_cart',['cart']),
			/* 有效商品列表 */
			effective(){
				return this.cart.filter( item => item.goods_efficacy)
			},
			/* 无效商品列表 */
			loseEffective(){
				return this.cart.filter( item => !item.goods_efficacy)
			}
		},
		onLoad() {
			// console.log(this.cart);
		}
	}
</script>

<style lang="scss">
	/* page {
		background-color: #F7F7F7;
	} */
	.content-container {
		min-height: 100vh;
		padding-bottom: 100rpx;
		background-color: #F7F7F7;
		.empty-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			image {}
			.text-box {
				color: gray;
			}
			.gohome-btn {
				height: 60rpx;
				line-height: 60rpx;
				color: white;
				padding: 0 40rpx;
				border-radius: 60rpx;
				margin-top: 40rpx;
				background-color: #ff0000;
			}
		}
		.header-box {
			font-size: 14px;
			color: #666;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			position: sticky;
			top: 0;
			z-index: 999;
			background-color: white;
			.edit-btn {
				cursor: pointer;
				color: #FF494A;
			}
		}
		.modal-box {
			font-size: 12px;
			color: white;
			position: fixed;
			top: 100rpx;
			left: 40rpx;
			padding: 20rpx;
			width: 628rpx;
			background-color: rgba(0, 0, 0, .3);
			border-radius: 10rpx;
			z-index: 999;
			.close-btn {
				cursor: pointer;
				margin-left: 10rpx;
			}
		}
		.goods-list {
			margin: 0 20rpx
		}
		.lose-efficacy-box {
			font-size: 14px;
			.lose-efficacy-firstline {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				margin: 0 20rpx 2rpx 20rpx;
				background-color: white;
				border-radius: 10rpx 10rpx 0 0;
				.clear-box {
					font-size: 12px;
					color: #ff0000;
				}
			}
		}
		.recommend-box {
			margin: 0 20rpx;
			.recommend-text {
				line-height: 40rpx;
				font-weight: 700;
				text-align: center;
				margin-top: 2 0rpx;
			}
			.recommend-goods-list {}
		}
	}
</style>